| react拖拽排序组件 | 您所在的位置：网站首页 › react hooks 拖拽排序 › react拖拽排序组件 |
react拖拽排序组件
|
关于拖拽排序组件有很多的经典组件库。 比如知名的拖拽组件react-dnd, 优点是提供拖拽的能力和相关的事件回调函数，原子化的使用方式过于复杂，当然这种方式使用起来会很灵活能提供较为强大的拖拽能力。 还有一个经典的拖拽排序库react-sortable-hoc，封装了具体的拖拽细节，最终目的就是实现改变数据驱动视图进行排序。相对来说使用会简单一些。但有局限性，只能用于列表拖拽。并且拖拽时展示的组件为新建的副本，在某些操作dom的时候会有奇怪的现象（一般遇不到），因为展示的不是真实dom 那么有没有一种数据驱动视图，使用简单，但是能进行任意拖拽的组件呢。对于这个需求我查阅了大量的源码，最终实现了一个组件。支持pc，移动端，欢迎提issue，react-draggable-sort 使用方式  import { DraggableAreaGroup, DraggerItem, DragMoveHandle, arrayMove } from "react-dragger-sort";
export const Example = () => {
const [arr, setArr] = useState([1, 2, 3, 4, 5, 6, 7]);
const onDragMoveEnd: DragMoveHandle = (tag, coverChild) => {
if (tag && coverChild) {
const preIndex = arr?.findIndex((item) => item === tag?.id);
const nextIndex = arr?.findIndex((item) => item === coverChild?.id)
const newArr = arrayMove(arr, preIndex, nextIndex);
setArr(newArr);
}
}
return (
{
arr?.map((item, index) => {
return (
DraggerItem{item}
)
})
}
)
}首先考虑到拖拽过程中不能改变原有被拖拽对象的布局样式，我们采取transform调整位置，而不是定位的方式改变位置。再拖拽结束后通过控制state数据变化完成一个最终的位置更换。但是相比定位方式，缺点是不能做位置动画，因为目标的布局千变万化，可能是列表，也可能是不规则的其他形状嵌套，所以貌似并不能在拖拽过程中就实现位置更换动画。这里希望大家能提供一个解决方案，我觉得是存在通用的方案的，目前可以通过回调函数onDragMove根据实际使用去直接操作dom进行动画操作。 组件包括两部分。DraggableArea组件提供拖拽容器，所有的拖拽应该在该容器内进行，但不限制div的层级。通过context传递给拖拽元素。同时不同的DraggableArea组件之间也提供跨区域拖拽的能力。DraggerItem组件用来包裹目标想要被拖拽的元素，使用非常简单。元素可以自定义样式，原有样式并不受影响，同时也提供了拖拽和缩放（缩放可能大部分场景用不到）。具体可以通过github查看详细文档 相关组件由多个小组件组合而成。react-free-draggable功能和react-draggable一样提供拖拽能力（至于为什么自己单独造轮子，是为了解决隐藏的bug），react-resize-zoom，提供缩放能力但不影响原有样式。 以上组件虽用ts编写，但打包的时候并没有打包声明文件，如果有需要我会上传。另外再推荐我另外一个拖拽库，使用场景在于提供可以拖拽布局的受控组件。react-draggable-layout。可以用来做自定义布局。欢迎大家提供issue，虽然维护已超过一年，但仍长期在线维护。 |
【本文地址】